<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from "vue";

// Responsive height calculations
const height_num = ref(window.innerHeight);
const height = computed(() => height_num.value + 'px');
const main_row_margin_y = computed(() => height_num.value * 0.2 + 'px');

window.onresize = () => {
  height_num.value = window.innerHeight;
  if (canvas.value) {
    canvas.value.width = window.innerWidth;
    canvas.value.height = window.innerHeight;
  }
};

// Particle system
const canvas = ref<HTMLCanvasElement | null>(null);
const ctx = ref<CanvasRenderingContext2D | null>(null);
const particles = ref<Array<Particle>>([]);
const mouseX = ref(0);
const mouseY = ref(0);
const isLoaded = ref(false);
const animationId = ref<number>(0);

// Particle class
class Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  size: number;
  opacity: number;
  color: string;
  originalX: number;
  originalY: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
    this.originalX = x;
    this.originalY = y;
    // 粒子的移动速度
    this.vx = (Math.random() - 0.5);
    this.vy = (Math.random() - 0.5);
    this.size = Math.random() * 2 + 1;
    this.opacity = Math.random() * 0.5 + 0.2;

    // Different particle colors for variety
    const colors = ['#955FEC', '#7C3AED', '#A855F7', '#C084FC', '#DDD6FE'];
    this.color = colors[Math.floor(Math.random() * colors.length)];
  }

  update() {
    // Gentle floating movement
    this.x += this.vx;
    this.y += this.vy;

    // Mouse interaction - particles are attracted to mouse
    const dx = mouseX.value - this.x;
    const dy = mouseY.value - this.y;
    const distance = Math.sqrt(dx * dx + dy * dy);

    if (distance < 150) {
      const force = (150 - distance) / 150;
      this.x += dx * force * 0.01;
      this.y += dy * force * 0.01;
    }

    // Boundary wrapping
    if (this.x < 0) this.x = window.innerWidth;
    if (this.x > window.innerWidth) this.x = 0;
    if (this.y < 0) this.y = window.innerHeight;
    if (this.y > window.innerHeight) this.y = 0;

    // Subtle opacity pulsing
    this.opacity += Math.sin(Date.now() * 0.001 + this.x * 0.01) * 0.01;
    this.opacity = Math.max(0.1, Math.min(0.7, this.opacity));
  }

  draw() {
    if (!ctx.value) return;

    ctx.value.save();
    ctx.value.globalAlpha = this.opacity;
    ctx.value.fillStyle = this.color;
    ctx.value.beginPath();
    ctx.value.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.value.fill();

    // Add a subtle glow effect
    ctx.value.shadowColor = this.color;
    ctx.value.shadowBlur = 10;
    ctx.value.fill();

    ctx.value.restore();
  }
}

// Initialize particles
const initParticles = () => {
  particles.value = [];
  const particleCount = Math.floor((window.innerWidth * window.innerHeight) / 15000);

  for (let i = 0; i < particleCount; i++) {
    particles.value.push(
        new Particle(
            Math.random() * window.innerWidth,
            Math.random() * window.innerHeight
        )
    );
  }
};

// Animation loop
const animate = () => {
  if (!ctx.value || !canvas.value) return;

  // Clear canvas with a subtle gradient background
  const gradient = ctx.value.createLinearGradient(0, 0, 0, canvas.value.height);
  gradient.addColorStop(0, '#0F0F23');
  gradient.addColorStop(0.5, '#1A1A2E');
  gradient.addColorStop(1, '#16213E');

  ctx.value.fillStyle = gradient;
  ctx.value.fillRect(0, 0, canvas.value.width, canvas.value.height);

  // Update and draw particles
  particles.value.forEach(particle => {
    particle.update();
    particle.draw();
  });

  // Draw connections between nearby particles
  drawConnections();

  animationId.value = requestAnimationFrame(animate);
};

// Draw lines between nearby particles
const drawConnections = () => {
  if (!ctx.value) return;

  for (let i = 0; i < particles.value.length; i++) {
    for (let j = i + 1; j < particles.value.length; j++) {
      const dx = particles.value[i].x - particles.value[j].x;
      const dy = particles.value[i].y - particles.value[j].y;
      const distance = Math.sqrt(dx * dx + dy * dy);

      if (distance < 100) {
        ctx.value.save();
        ctx.value.strokeStyle = '#955FEC';
        ctx.value.lineWidth = 0.5;
        ctx.value.globalAlpha = (100 - distance) / 100 * 0.3;
        ctx.value.beginPath();
        ctx.value.moveTo(particles.value[i].x, particles.value[i].y);
        ctx.value.lineTo(particles.value[j].x, particles.value[j].y);
        ctx.value.stroke();
        ctx.value.restore();
      }
    }
  }
};

// Mouse tracking
const handleMouseMove = (e: MouseEvent) => {
  mouseX.value = e.clientX;
  mouseY.value = e.clientY;
};

// Component lifecycle
onMounted(() => {
  if (canvas.value) {
    canvas.value.width = window.innerWidth;
    canvas.value.height = window.innerHeight;
    ctx.value = canvas.value.getContext('2d');

    initParticles();
    animate();
  }

  document.addEventListener('mousemove', handleMouseMove);

  setTimeout(() => {
    isLoaded.value = true;
  }, 100);
});

onUnmounted(() => {
  if (animationId.value) {
    cancelAnimationFrame(animationId.value);
  }
  document.removeEventListener('mousemove', handleMouseMove);
});

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  subTitle: {
    type: Array,
    required: true
  },
  buttonContent: {
    type: String,
    default: "点击开始"
  }
});

const emit = defineEmits(['startButton']);
</script>

<template>
  <div class="cover">
    <!-- Particle canvas background -->
    <canvas ref="canvas" class="particle-canvas"></canvas>

    <!-- Content overlay -->
    <el-container class="common-layout cover-layout">
      <el-header></el-header>
      <el-main>
        <!-- Title with fade-in animation -->
        <el-row display="flex" justify="center" class="main-row">
          <el-col :span="6" class="main-cover" :class="{ 'fade-in': isLoaded }">
            {{ title }}
          </el-col>
        </el-row>

        <!-- First row of subtitles with staggered animation -->
        <el-row display="flex" justify="center" style="margin-top: 20px">
          <el-col :span="3" class="sub-main-cover" :class="{ 'fade-in': isLoaded }" style="animation-delay: 200ms">
            {{ subTitle[0] }}
          </el-col>
          <el-col :offset='1' :span="3" class="sub-main-cover" :class="{ 'fade-in': isLoaded }" style="animation-delay: 400ms">
            {{ subTitle[1] }}
          </el-col>
        </el-row>

        <!-- Second row of subtitles with staggered animation -->
        <el-row display="flex" justify="center">
          <el-col :span="3" class="sub-main-cover" :class="{ 'fade-in': isLoaded }" style="animation-delay: 600ms">
            {{ subTitle[2] }}
          </el-col>
          <el-col :offset='1' :span="3" class="sub-main-cover" :class="{ 'fade-in': isLoaded }" style="animation-delay: 800ms">
            {{ subTitle[3] }}
          </el-col>
        </el-row>

        <!-- Button with animation and hover effect -->
        <el-row display="flex" justify="center">
          <el-col :span="3" >
            <button @click="$emit('startButton')" :class="{ 'fade-in': isLoaded }" class="custom-button" style="animation-delay: 1000ms">
              {{ buttonContent }}
            </button>
          </el-col>
        </el-row>
      </el-main>
      <el-footer></el-footer>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.cover {
  height: v-bind(height) !important;
  position: relative;
  overflow: hidden;
}

.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.cover-layout {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  position: relative;
  z-index: 2;
}

.main-cover {
  font-size: 80px;
  font-family: 优设标题黑, serif;
  color: #FFFFFF;
  overflow-x: visible;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(20px);
  text-shadow: 0 4px 20px rgba(149, 95, 236, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 0 10px rgba(149, 95, 236, 0.3));
}

.sub-main-cover {
  font-size: 22px;
  color: #E2E8F0;
  overflow-x: visible;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(15px);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.main-row {
  margin-top: v-bind(main_row_margin_y);
}

/* Custom button styling with hover effects */
.custom-button {
  width: 100%;
  margin-top: 70px;
  font-size: 18px;
  background: linear-gradient(135deg, #955FEC, #7C3AED);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  opacity: 0;
  box-shadow: 0 4px 15px rgba(149, 95, 236, 0.3);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.7s ease;
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(149, 95, 236, 0.4);

    &::before {
      left: 100%;
    }

    &::after {
      opacity: 1;
    }
  }

  &:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(149, 95, 236, 0.5);
  }
}
/* Animation classes */
.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>